<script setup lang="ts">
import { ref } from 'vue';
import AuthBar from '@/components/authBar/index.vue';

const reportExpandKeys = ref([]);

function handleConfirm() {
  uni.navigateTo({
    url: '/pages/examination/inspectAppointment'
  });
}
</script>

<template>
  <view class="inspect flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto">
      <view class="page-title mt-55">
        检验检查项目
      </view>
      <view class="page-subtitle">
        请选择您方便的日期和时间段
      </view>

      <!--  -->
      <view class="patient-info__block mt-40 p-48 py-40">
        <view class="patient-info__title">
          患者信息
        </view>
        <view class="patient-info__value mt-20">
          王武（男,35岁）
        </view>
      </view>

      <view class="px-48 pt-48">
        <!--  -->
        <view class="flex items-center justify-between">
          <view class="exam-title">
            检验检查项目
          </view>
          <!-- 检查项目数量 -->
          <view class="exam-count">
            共2项
          </view>
        </view>

        <!-- 项目分类 -->
        <view class="category-list__block mt-20">
          <view class="category-list inline-block">
            <view class="category-list__title mr-18">
              项目分类:
            </view>
            <view class="category-item">
              呼吸功能检查
            </view>
            <view class="category-item">
              内分泌和激素检查
            </view>
            <view class="category-item">
              电生理检查
            </view>
            <view class="category-item">
              肺功能检查
            </view>
            <view class="category-item">
              心血管功能检查
            </view>
          </view>
        </view>

        <!-- 检查项目列表 -->
        <view class="exam-list__block">
          <wd-collapse v-model="reportExpandKeys">
            <wd-collapse-item v-for="item in 3" :key="item">
              <template #title="{ expanded }">
                <view class="group-collapse__title flex items-center">
                  <view class="collapse-title__checkbox">
                    <wd-checkbox shape="square" />
                  </view>
                  <view class="collapse-title__content ml-26 flex-1">
                    <view class="collapse-title__content-name">
                      血常规检查
                    </view>
                    <view class="collapse-title__content-count">
                      检验科 · ¥35.00
                    </view>
                  </view>
                  <view class="collapse-title__action">
                    <view class="text-right">
                      <wd-icon v-if="expanded" name="arrow-up" size="48px" />
                      <wd-icon v-else name="arrow-down" size="48px" />
                    </view>
                  </view>
                </view>
              </template>

              <view class="exam-item__content">
                <view class="divider mb-40" />
                <view class="exam-content__title">
                  项目描述
                </view>
                <view class="exam-content__desc">
                  通过检测血液成分，评估整体健康状况，包括红细胞、白细胞、血小板等指标。
                </view>
                <view class="divider mb-40 mt-30" />
                <view class="exam-content__title">
                  检查准备
                </view>
                <view class="exam-content__desc">
                  无需特殊准备，可正常饮食。
                </view>
              </view>
            </wd-collapse-item>
          </wd-collapse>
        </view>

        <!-- 项目金额 -->
        <view class="exam-money__block mt-46 px-30 pb-68 pt-40">
          <view class="exam-money__content flex items-center justify-between">
            <view>
              <view class="text-36 font-bold">
                总金额
              </view>
              <view class="text-60 font-600">
                ¥200.50
              </view>
            </view>
            <view class="text-right">
              <view class="text-32 c-#3D3D3D">
                预计完成时间
              </view>
              <view class="text-42 c-#3D3D3D font-500">
                约 30-60 分钟
              </view>
            </view>
          </view>

          <view class="flex-center">
            <view class="confirm-btn">
              <wd-button block @click="handleConfirm">
                确认选择并预约
              </wd-button>
            </view>
          </view>
        </view>

        <view class="mt-65">
          <view class="page-tips">
            <view class="tips-title">
              <wd-icon name="help-circle" size="32px" /> 使用提示
            </view>
            <view class="tips-content">
              <view>
                系统会显示未来7天的可预约时间段，您可以根据自己的时间安
                排选择合适的日期和时间段。建议避开高峰期（上午8:30-10:3
                0）以减少等待时间。
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '检验检查',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.inspect {
  background-color: var(--bg-color);
  height: 100%;

  .page-title {
    font-size: 60px;
    font-weight: bold;
    color: var(--text-color);
    text-align: center;
  }

  .page-subtitle {
    text-align: center;
    font-size: 28px;
    color: var(--secondary-text-color);
    max-width: 524px;
    margin: 0 auto;
  }

  .patient-info__block {
    background: linear-gradient(180deg, #d8e7ff 40%, #afceff 100%);

    .patient-info__title {
      color: var(--secondary-text-color);
      font-size: 32px;
    }

    .patient-info__value {
      color: #3d3d3d;
      font-size: 46px;
      font-weight: bold;
    }
  }

  .exam-title {
    color: #3d3d3d;
    font-size: 50px;
    font-weight: bold;
  }

  .exam-count {
    background: rgba(247, 250, 254, 0.5);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--primary);
    font-size: 36px;
    padding: 10px 36px;
    border-radius: 100px;
  }

  .category-list__block {
    background: #ffffff;
    border-radius: 20px;
    padding: 40px 40px 20px;

    .category-list__title {
      color: var(--text-color);
      font-size: 36px;
      font-weight: 500;
      display: inline-block;
    }

    .category-item {
      background: #e5f0ff;
      font-size: 34px;
      color: #3d3d3d;
      padding: 10px 40px;
      border-radius: 100px;
      display: inline-block;
      margin-right: 20px;
      margin-bottom: 30px;
    }
  }

  .exam-list__block {
    margin-top: 30px;
    --wot-color-white: transparent;

    :deep(.wd-collapse-item) {
      background: #f5f9ff;
      border-radius: 20px;
      margin-top: 20px;
    }

    .group-collapse__title {
      padding: 43px 45px 45px 30px;
      .collapse-title__checkbox {
        --wot-checkbox-size: 82px;
        --wot-checkbox-square-radius: 50%;
        --wot-checkbox-checked-color: var(--primary);
        --wot-checkbox-check-color: #fff;
        --wot-checkbox-icon-size: 58px;
      }
      .collapse-title__content {
        .collapse-title__content-name {
          font-size: 36px;
          font-weight: bold;
          color: var(--text-color);
        }
        .collapse-title__content-count {
          font-size: 30px;
          color: #686869;
        }
      }

      .collapse-title__action {
        color: var(--primary);
      }
    }
  }

  .exam-item__content {
    padding: 0 30px 30px;

    .exam-content__title {
      font-size: 32px;
      color: #686869;
    }

    .exam-content__desc {
      font-size: 34px;
      color: #3d3d3d;
      margin-top: 14px;
    }

    .divider {
      height: 1px;
      background: #c6dafa;
    }
  }

  .exam-money__block {
    background: #f3f7ff;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--text-color);
  }

  .confirm-btn {
    width: 708px;
    --wot-button-medium-height: 124px;
    --wot-button-medium-fs: 42px;
    margin-top: 59px;

    :deep(.wd-button) {
      font-weight: bold;
    }
  }

  .page-tips {
    background: rgba(247, 250, 254, 0.5);
    border-radius: 10px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    padding: 38px 32px;
    margin-bottom: 45px;

    .tips-title {
      font-size: 32px;
      font-weight: bold;
      color: var(--text-color);
    }

    .tips-content {
      font-size: 24px;
      color: var(--secondary-text-color);
      margin-top: 25px;
    }
  }
}
</style>
